<template>
    <div class="col-xl-4 col-lg-6 col-sm-12 position-relative card-deck-single" name="card_2">
        <div class="card-inner">
            <div class="card front">
                <div class="card-header">
                    <div class="header-text">
                        <div class="header-text-title">Pulse</div>
                        <div class="header-text-class">The elements of visualization</div>
                    </div>
                    <span class="header-symbol"></span>
                </div>
                <div class="card-frontImg">
                    <img class="card-img front-gif" src="./assets/image/fail_loading.svg">
                    <img class="card-img front-preview" src="./assets/image/loading.svg">
                </div>
                <div class="card-body">
                    <div class="card-body-subtitle">HOW</div>
                    <p class="card-body-text">Expand and contract rhythmically.</p>
                    <div class="card-body-subtitle">WHY</div>
                    <p class="card-body-text">Size contrast is a common way of attracting attention
                        and conveying importance.
                    </p>
                    <div class="card-body-subtitle">Applicable Visualization Techniques</div>
                    <p class="card-body-text">Size contrast is a common way of attracting attention
                        and conveying importance.
                    </p>
                </div>
                <div class="card-footer">
                    <span class="card-footer-num">NO. 1</span>
                    <button class="card-footer-bottom">View examples</button>
                </div>
            </div>
            <div class="card back back-none">
                <div class="card-header">
                    <div class="header-text">
                        <div class="header-text-title">Pulse</div>
                        <div class="header-text-class">The elements of visualization</div>
                    </div>
                    <span class="header-symbol"></span>
                </div>
                <div class="card-imgBox">
                    <img class="card-img back-gif" src="./assets/image/fail_loading.svg">
                    <div class="img-cover">
                        <div class="img-cover-mask"></div>
                        <span class="img-cover-overlay" type="button" data-toggle="modal"
                            data-target="#zooming-modal"></span>
                    </div>
                </div>
                <div class="card-body">
                    <h6 class="card-body-subtitle">Inequality: how wealth is distributed in the UK - animated video</h6>
                    <div class="card-body-caption">
                        <div><span>Source: </span>The Guardian</div>
                        <div><span>Year: </span>2013</div>
                        <div><span>Category: </span>Social Sciences</div>
                        <div><span>Subcategory: </span>Economics</div>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="https://www.theguardian.com/commentisfree/video/2013/oct/08/inequality-how-wealth-distributed-uk-animated-video"
                        target="_blank">
                        <span class="card-footer-url"></span>URL
                    </a>
                    <button class="card-footer-bottom">Back to front</button>
                </div>
            </div>
        </div>
    </div>
</template>